// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,
  Popconfirm,
  Upload,
  message,
  Button,
  Modal,
  Row,
  Col,
  Input,
  Divider, 
  Tooltip,
  Icon,
  Tabs,
  Spin } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config' 
import Cookie from 'js-cookie'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './integralMemberStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const routeView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace, } = model

  // modelObj.xxx获取model中状态机的值
  let  {biz,regionList} = modelObj

  function updateModal(type,item){
    hashHistory.push({
      pathname: '/home/integralMall/integralMemberDetail',
      query: {id:item.id,regionId:item.regionid}
    })
  }

  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    'ui': {
      // 页面接口地址
      'api_url': 'jfsc/admin/member/list',
      // 接口方式
      'method': 'POST',
      'app': '',
      // 接口参数
      'params': {uid:localStorage.getItem("username"),regionId:Cookie.get(config.cookie.regionId)},
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      'mockData': null,
      // 查询栏
      'search_bar': {
        'fields': [
          {
            en_name: 'name',
            zh_name: '业主名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'mobile',
            zh_name: '业主电话',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'regionId',
            zh_name: '区域名称',
            elem_type: 'Select', 
            elem_valid_type: 'string',
            cmpt_items: regionList
          },
        ],
        searchHandler: (p) => { // 自定义搜索按钮回调函数，点击搜索时触发
          // let {projectId,provinceCode} = biz.queryForm
          // if(!projectId){
          //   delete biz.queryForm.projectId
          // }
          // if(provinceCode){
          //   delete biz.queryForm.provinceCode
          // }
          
        },
        resetHandler: (p) => { // 自定义重置按钮回调函数，点击重置时触发
          // console.log('reset click', p)
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          // console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table': {
        'status_params': 'status=0',
        'status_text': '全部',
        'scroll': { x: 1600 },
        // 表头字段列表"
        'fields': [
          {
            en_name: "key",
            zh_name: "序号", 
            width: 80,
            render: (a, item, index, d, e, f) => {
              return index + 1
            },
          },
          {
            'en_name': 'accountid',
            'zh_name': 'accountid',
          },
          {
            'en_name': 'yzname',
            'zh_name': '业主姓名',
          },
          {
            'en_name': 'yzmobile',
            'zh_name': '业主电话',
          },
          {
            'en_name': 'zyx1',
            'zh_name': '业主身份证',
          },
          {
            'en_name': 'yzLevel',
            'zh_name': '会员等级',
          },
          {
            'en_name': 'dqIntegral',
            'zh_name': '当前积分',
            render: (text, row, index) => {
              if(text>0){
                  return <a style={{color: '#0877fd'}} target="_blank" href="https://data.mideazy.com/bi/Viewer?proc=1&action=viewer&hback=true&db=!7f8e!!7684!!6848!!573a!!2f!!5fae!!4e91!!2f!!79ef!!5206!!660e!!7ec6!.db">{text}</a>
              }else{
                  return text
              }
          },
          },
          {
            'en_name': 'ljIntegral',
            'zh_name': '累计积分',
          }, 
          {
            'en_name': 'regionname',
            'zh_name': '区域',
          },
          {
            en_name: "edit",
            zh_name: "操作",
            width: 100,
            fixed: 'right',
            render: (a, item, index, d, e, f) => {
              return (
                <span>
                  <FlagBtn node={<a onClick={() => updateModal('check', item)}>查看</a>} btnId={''}> </FlagBtn>
                  {/* <FlagBtn node={<a onClick={() => detailSkip('edit', item)}>编辑<span className="ant-divider"  style={{ display: 'inline-block' }}/></a>} btnId={''}> </FlagBtn> */}
                  {/* <FlagBtn node={<a onClick={() => statisticsSkip('check',item)}>统计<span className="ant-divider"  style={{ display: 'inline-block' }}/></a>} btnId={''}> </FlagBtn>
                  <FlagBtn node={<Popconfirm Collapse title={`确定要删除吗？`} okText='确定' cancelText='取消' onConfirm={() => deleteSkip(item)}>
                      <a href='javascript:void(0)' onClick={(e) => {}}>删除
                          </a>
                 </Popconfirm>} btnId={''}> </FlagBtn> */}
                </span>
              )
            },
          }

        ],

        'actions': [
        ],
        "action_props": {
          fixed: "right",
          width: 210
        }
      },
      // 操作栏
      action_bar: [
        {
          'func_name': 'add',
          'label': '导出',
          btnId: '',
          'type': 'primary',
          'onClick': (e) => {
            dispatch({
              type: `${namespace}/exportExcel`,
              payload: {  }
            })
          }
        }
      ]
    },
  }

  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }


  return (
      <div className={cx('pageLayout')}>
        <ListPage pageProps={pageProps} />
      </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(routeView))